Getting Started with React Development with the React Suite Library — Alerts and Notifications

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Close Alerts

We can close alerts with the Alert.close and Alert.closeAll method.

For instance, we can write:

import React from "react";
import { Alert, ButtonToolbar, Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={() => Alert.info("This is a informations.")}>
          Info
        </Button>
        <Button onClick={() => Alert.close()}> Close </Button>
        <Button onClick={() => Alert.closeAll()}> Close all </Button>
      </ButtonToolbar>
    </div>
  );
}

Alert.close to closes the current alert.

Alert.closeAll close all open alerts.

Notification

We can add notifications into our React app with the Notification object.

For instance, we can write:

import React from "react";
import { Notification, Paragraph, ButtonToolbar, Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const open = () => {
    Notification.open({
      title: "Notify",
      description: "hello"
    });
  };

  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open </Button>
      </ButtonToolbar>
    </div>
  );
}

We call the Notification.open method to open an alert.

title has the notification title.

description has the notification content.

We can also call Notification.info , Notification.success , Notification.warning and Notification.error to open different kinds of notifications.

And we can set the placement with the placement property:

import React from "react";
import { Notification, ButtonToolbar, Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const open = () => {
    Notification.open({
      title: "Notify",
      description: "hello",
      placement: "topStart"
    });
  };

  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open </Button>
      </ButtonToolbar>
    </div>
  );
}

placement can be 'topStart' , 'topEnd' , 'bottomStart' , and 'bottomEnd' .

We can close notifications with the Notification.close and Notification.closeAll methods.

closeAll close all notifications.

close close the top one displayed.

import React from "react";
import { Notification, ButtonToolbar, Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const open = () => {
    Notification.open({
      title: "Notify",
      description: "hello"
    });
  };

  const handleClose = () => {
    Notification.close();
  };

  const handleCloseAll = () => {
    Notification.closeAll();
  };

  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open </Button>
        <Button onClick={handleClose}> Close </Button>
        <Button onClick={handleCloseAll}> Close all</Button>
      </ButtonToolbar>
    </div>
  );
}

We can set how long the notification displayed with duration :

import React from "react";
import { Notification, ButtonToolbar, Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const open = () => {
    Notification.open({
      title: "Notify",
      description: "hello",
      duration: 20000
    });
  };

  return (
    <div>
      <ButtonToolbar>
        <Button onClick={open}> Open </Button>
      </ButtonToolbar>
    </div>
  );
}

Conclusion

We can add alerts and notifications into our React app with React Suite.